<template>
	<view class="content">
		<view  class="my-service-title" @click="handleNavBarBack">
			<uv-icon name="arrow-left" size="22" color="#fff"></uv-icon>
		</view>
		
		<view class="banner">
			<uv-image :src="banner" width="100%" height="auto" mode="widthFix"></uv-image>
		</view>
		<view class="content-item">
			<view class="card">
				<view class="title">主办单位</view>
				<view class="list">
					<view class="icon">
						<image src="https://res.ennew.com/image/webp/a24171d2de546f015586a9373ebfc37a.webp" class="img" mode="widthFix"></image>
					</view>
					<view class="text">中国医药教育协会</view>
				</view>
				
				<view class="list">
					<view class="icon">
						<image src="https://res.ennew.com/image/webp/a24171d2de546f015586a9373ebfc37a.webp" class="img" mode="widthFix"></image>
					</view>
					<view class="text">天津市医疗健康学会</view>
				</view>
			</view>
			
			<view class="card">
				<view class="title">承办单位</view>
				<view class="list">
					<view class="icon">
						<image src="https://res.ennew.com/image/webp/52575d5b8f7b80bbcd324c74b8f0fc57.webp" class="img" mode="widthFix"></image>
					</view>
					<view class="text">中国医药教育协会化学治疗专业委员会</view>
				</view>
				
				<view class="list">
					<view class="icon">
						<image src="https://res.ennew.com/image/webp/52575d5b8f7b80bbcd324c74b8f0fc57.webp" class="img" mode="widthFix"></image>
					</view>
					<view class="text">天津市医疗健康学会胸外科专委会</view>
				</view>
				
				<view class="list">
					<view class="icon">
						<image src="https://res.ennew.com/image/webp/52575d5b8f7b80bbcd324c74b8f0fc57.webp" class="img" mode="widthFix"></image>
					</view>
					<view class="text">天津市第一中心医院</view>
				</view>
			</view>
			
			<view class="card">
				<view class="title">会议酒店</view>
				<view class="list">
					<view class="icon">
						<image src="https://res.ennew.com/image/webp/d7b5ef2a41cf663cb46b5a45562055a4.webp" class="img" mode="widthFix"></image>
					</view>
					<view class="text">天津梅江中心皇冠假日酒店</view>
				</view>
				
				<view class="mapView" @click="actionSheet?.open()">
					<map style="width: 100%; height: 100%;" :latitude="position.latitude" :longitude="position.longitude" :markers="markers" :scale="18" :enable-building="true"></map>
				</view>
			</view>
		</view>
		<uv-action-sheet  ref="actionSheet" :actions="list" @select="selectClick"></uv-action-sheet>
	</view>
</template>

<script setup>
	import {onLoad, onShow, onHide } from '@dcloudio/uni-app';
	import { ref } from 'vue';

	const banner = ref('https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/WechatIMG299.webp')
	
	const position = ref({
		longitude: 117.219816,
		latitude: 39.041567,
		name:'天津梅江中心皇冠假日酒店'
	})
	
	const markers = ref([{
		longitude: 117.219816,
		latitude: 39.041567,
		title: '天津梅江中心皇冠假日酒店',
		iconPath: 'https://res.ennew.com/image/webp/6163eed28ae0b8ddc04cfe1130123785.webp',
		width: 20,
		height: 20
	}])
	
	const list = ref([
		{name:'高德地图',index:0},{name:'百度地图',index:1},{name:'腾讯地图',index:2}
	])
	
	const actionSheet = ref(null)
	
	// 返回
	const handleNavBarBack = () => {
		uni.navigateBack();
	}

	const openFun = (item) => {
		if(item.type == 2){
			window.open(item.url)
		}else{
			console.log(item)
			uni.navigateTo({url: item.url})
		}
	}
	
	// 选择地图
	const selectClick = item => {
		guide(item.index)
	}
	
	// 地图跳转
	const guide = (signMap) => {
		uni.showLoading({title: '跳转中'});
		
		if (position.value.name && position.value.name != '') {
			//地点位置position.name 地点经纬度lng lat
			var lng = position.value.longitude; //经度39.9
			var lat = position.value.latitude; //纬度116.4
			if (signMap == 0) {
				uni.getSystemInfo({
					success: (res) => {
						if (res.platform == "android") {
							window.location.href ="androidamap://viewMap?sourceApplication=appname&poiname=" +
								position.value.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
							//判断是否跳转
							setTimeout(function() {
								let hidden = window.document.hidden || window.document
									.mozHidden || window.document.msHidden || window
									.document
									.webkitHidden
								if (typeof hidden == "undefined" || hidden == false) {
									//调用高德地图
									window.location.href =
										"https://uri.amap.com/marker?position=" + lng +
										"," +
										lat + "&name=" + position.value.name;
								}
							}, 2000);
						} else {
							window.location.href =
								"iosamap://viewMap?sourceApplication=appname&poiname=" + position.value
								.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
							//判断是否跳转
							setTimeout(function() {
								let hidden = window.document.hidden || window.document
									.mozHidden || window.document.msHidden || window
									.document
									.webkitHidden
								if (typeof hidden == "undefined" || hidden == false) {
									//调用高德地图
									window.location.href =
										"https://uri.amap.com/marker?position=" + lng +
										"," + lat + "&name=" + position.value.name;
								}
							}, 2000);
						}
					}
				})
			} else if (signMap == 1) {
				// // 百度地图
				uni.getSystemInfo({
					success: (res) => {
						if (res.platform == "android") {
							let d = new Date();
							let t0 = d.getTime();
							window.location.href =
								"androidamap://viewMap?sourceApplication=appname&poiname=" +
								position.value.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
							//由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验
							var delay = setInterval(function() {
								var d = new Date();
								var t1 = d.getTime();
								if (t1 - t0 < 3000 && t1 - t0 > 2000) {
									window.location.href =
										"http://api.map.baidu.com/marker?location=" + lat +
										"," + lng + "&title=" + position.value.name +
										"&content=地点&output=html&src=webapp.baidu.openAPIdemo";
								}
								if (t1 - t0 >= 3000) {
									clearInterval(delay);
								}
							}, 1000);
						} else {
							let d = new Date();
							let t0 = d.getTime();
							window.location.href =
								"iosamap://viewMap?sourceApplication=appname&poiname=" + 
								position.value.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
							//由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验
							let delay = setInterval(function() {
								var d = new Date();
								var t1 = d.getTime();
								if (t1 - t0 < 3000 && t1 - t0 > 2000) {
									window.location.href =
										"http://api.map.baidu.com/marker?location=" + lat +
										"," + lng + "&title=" + position.value.name +
										"&content=地点&output=html&src=webapp.baidu.openAPIdemo";
								}
								if (t1 - t0 >= 3000) {
									clearInterval(delay);
								}
							}, 1000);
						}
					}
				})
			} else {
				// // 腾讯地图
				uni.getSystemInfo({
					success: (res) => {
						if (res.platform == "android") {
							window.location.href =
								"androidamap://viewMap?sourceApplication=appname&poiname=" +
								position.value.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
							//判断是否跳转
							setTimeout(function() {
								let hidden = window.document.hidden || window.document
									.mozHidden || window.document.msHidden || window
									.document
									.webkitHidden
								if (typeof hidden == "undefined" || hidden == false) {
									//调用腾讯地图
									window.location.href =
										`https://apis.map.qq.com/uri/v1/marker?marker=coord:(${lat},${lng})&addr:${position.value.name}`
								}
							}, 2000);
						} else {
							window.location.href =
								"iosamap://viewMap?sourceApplication=appname&poiname=" + position.value.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
							//判断是否跳转
							setTimeout(function() {
								let hidden = window.document.hidden || window.document
									.mozHidden || window.document.msHidden || window
									.document
									.webkitHidden
								if (typeof hidden == "undefined" || hidden == false) {
									//调用高德地图
									window.location.href =
										`https://apis.map.qq.com/uri/v1/marker?marker=coord:(${lat},${lng})&addr:${position.value.name}`
								}
							}, 2000);
						}
					}
				})
			}
		} else {
			uni.showToast({
				title: '暂不知道该地点位置',
				icon: 'none',
				duration: 2000,
			});
		}
	}
	

	//分享函数
	const getWin =  async () => { 
		 const currentUrl = 'https://www.yunyakeji.top/';
		
		 // 请求后端获取签名配置
		const res = await vk.callFunction({
			url: 'client/token/pub/index',
			data: { url: currentUrl } // 传递当前URL
		});
		
		const config = res;
		console.log('config',config)
		// 初始化微信SDK
		jWeixin.config({
			debug: false,
			appId: config.appId,
			timestamp: config.timestamp,
			nonceStr: config.noncestr,
			signature: config.signature,
			jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData','onMenuShareAppMessage','onMenuShareTimeline']
		});
		
		jWeixin.ready(() => {
		    // 自定义“分享给朋友”
			 const shareConfig = {
				title: '2025天津市第四届海河肺癌诊疗新进展学术会议',
				desc: '会议日期：6月21日～22日，会议场地：天津梅江中心皇冠假日酒店', // 分享描述
				link: currentUrl, // 使用当前URL
				imgUrl: 'https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/WechatIMG192.webp', // 分享图标
			};
			
		    jWeixin.updateAppMessageShareData(shareConfig);
		
		    // 自定义“分享到朋友圈”
		    jWeixin.updateTimelineShareData(shareConfig);
			
			// 兼容旧版API
			  jWeixin.onMenuShareAppMessage(shareConfig);
			  
			  jWeixin.onMenuShareTimeline(shareConfig);
		});
		
		jWeixin.error(err => {
			console.error('微信SDK初始化失败', err);
		});
	}
	
	onLoad(() => {
		getWin()
	})
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		max-width: 750px;
		min-height: 100vh;
		background: no-repeat center bottom;
		background-size: auto 100%;
		box-sizing: border-box;
		position: relative;
		display: block;
		margin: 0 auto;
		background-color: #F5F6F7;
		padding-bottom: 5px;
		
		.my-service-title {
			width: 54rpx;
			height: 54rpx;
			background: rgba(24, 31, 67, 0.17);
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			top: 30rpx;
			left: 30rpx;
			z-index: 99;
		}
		
		.banner {
			width: 100%;
			height: auto;
			margin: 0 auto;
		}
		
		.content-item{
			width: 100%;
			height: auto;
			padding: 16px 32rpx;
			box-sizing: border-box;
			
			.card{
				width: 100%;
				height: auto;
				background: #FFFFFF ;
				box-shadow: 0rpx 8rpx 12rpx -2rpx rgba(0,0,0,0.05), 0rpx 4rpx 8rpx -2rpx rgba(0,0,0,0.03);
				border-radius: 32rpx;
				margin-bottom: 48rpx;
				padding: 48rpx 30rpx 48rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				gap: 32rpx;
				
				.title{
					width: 144rpx;
					height: 56rpx;
					font-family: Roboto, Roboto;
					font-weight: 600;
					font-size: 36rpx;
					color: #0542D7;
					line-height: 56rpx;
				}
				
				.list{
					width: 100%;
					height: 66rpx;
					display: flex;
					align-items: center;
					gap: 24rpx;
					
					.icon{
						width: 66rpx;
						height: 66rpx;
						background: #EFF6FF;
						border-radius: 66rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						
						.img{
							width: 36rpx;
							height: auto;
						}
					}
					
					.text{
						font-family: Roboto, Roboto;
						font-weight: 700;
						font-size: 30rpx;
						color: #1F2937;
					}
				}
				
				.mapView{
					width: 100%;
					height: 320rpx;
					border-radius: 10rpx;
					overflow: hidden;
				}
			}
		}
	}
</style>